<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-14 14:11:03
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-16 10:07:12
 * @FilePath: \test\src\components\AppealTabs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 申诉管理 -->
<template>
    <div class="appeal-tabs-box">
        <Card>
            <van-row class="after-border-box">
                <van-col :span="12" v-for="(item,index) in tabList" :key="index">
                    <div class="common-inactive-box" @click="checkType(index)"
                        :class="currentIndex == index ? 'common-active-box' : ''">
                        <div>{{ item.num }}</div>
                        <div>{{ item.name }}</div>
                    </div>
                </van-col>
            </van-row>
        </Card>
        <Card v-for="(item, index) in 2" :key="index">
            <div class="row">
                <div class="icon-flex-box row">
                    <van-image round width="44px" height="44px" fit="contain" :src="personImg" />
                </div>
                <div class="info-flex-box flex1">
                    <div>孙茹芸 06</div>
                    <div>初中部2021级(03)班</div>
                </div>
                <div class="right-flex-box">
                    -2分
                </div>
            </div>
            <Card bgColor="#f9f9f9">
                <van-row class="color3">
                    <van-col :span="6" class="color9">申诉原因</van-col>
                    <van-col :span="18">与学生沟通，学生并无扣分行为，此评分应该是操作失误，请撤回评分，谢谢。</van-col>
                </van-row>
            </Card>
            <Card bgColor="#f9f9f9" padbottom="5">
                <van-collapse v-model="activeNames" accordion :border="false">
                    <van-collapse-item title="审核流程" name="1">
                        <template #value>
                            <div>
                                {{ activeNames== '1' ? '收起' : '展开'}}
                            </div>
                        </template>
                        <div style="background-color: #F9F9F9;margin-top: 15px;">
                            <van-steps direction="vertical" :active="1" :finish-icon="finishImg" :active-icon="nowImg"
                                :inactive-icon="waitImg" background-color="#F9F9F9" size="16px">
                                <van-step>
                                    <van-row class="row" style="margin-bottom:10px;">
                                        <van-image round width="30px" height="30px" fit="contain" :src="personImg" />
                                        <span class='font16' style="margin:0 10px;display:inline-block;">班主任</span>
                                        <div class="icon-flex-box">
                                            <a href="'tel:13272185456'" rel="external nofollow">
                                                <van-icon name="phone" color="#fff" size="14" />
                                            </a>
                                        </div>
                                    </van-row>
                                    <van-row style="margin-bottom:10px;">
                                        <van-col :span="6" class="color9">申诉状态</van-col>
                                        <van-col :span="18">已发起</van-col>
                                    </van-row>
                                    <van-row style="margin-bottom:15px;">
                                        <van-col :span="6" class="color9">申诉时间</van-col>
                                        <van-col :span="18">2022.03.15 16:21</van-col>
                                    </van-row>
                                </van-step>
                                <van-step>
                                    <van-row class="row" style="margin-bottom:10px;">
                                        <van-image round width="30px" height="30px" fit="cover" :src="personImg" />
                                        <span class='font16' style="margin:0 10px;display:inline-block;">班主任</span>
                                        <div class="icon-flex-box">
                                            <a href="'tel:13272185456'" rel="external nofollow">
                                                <van-icon name="phone" color="#fff" size="14" />
                                            </a>
                                        </div>
                                    </van-row>
                                    <van-row style="margin-bottom:10px;">
                                        <van-col :span="6" class="color9">申诉状态</van-col>
                                        <van-col :span="18">已发起</van-col>
                                    </van-row>
                                    <van-row style="margin-bottom:15px;">
                                        <van-col :span="6" class="color9">申诉时间</van-col>
                                        <van-col :span="18">2022.03.15 16:21</van-col>
                                    </van-row>
                                </van-step>
                                <van-step>
                                    <van-row class="row" style="margin-bottom:10px;">
                                        <van-image round width="30px" height="30px" fit="cover" :src="personImg" />
                                        <span class='font16' style="margin:0 10px;display:inline-block;">班主任</span>
                                        <div class="icon-flex-box">
                                            <a href="'tel:13272185456'" rel="external nofollow">
                                                <van-icon name="phone" color="#fff" size="14" />
                                            </a>
                                        </div>
                                    </van-row>
                                    <van-row style="margin-bottom:10px;">
                                        <van-col :span="6" class="color9">申诉状态</van-col>
                                        <van-col :span="18">已发起</van-col>
                                    </van-row>
                                    <van-row style="margin-bottom:15px;">
                                        <van-col :span="6" class="color9">申诉时间</van-col>
                                        <van-col :span="18">2022.03.15 16:21</van-col>
                                    </van-row>
                                </van-step>
                            </van-steps>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </Card>
            <Card bgColor="#f9f9f9" padbottom="5">
                <van-collapse v-model="activeNames" accordion :border="false">
                    <van-collapse-item title="扣分情况" name="2">
                        <template #value>
                            <div>
                                {{ activeNames== '2' ? '收起' : '展开'}}
                            </div>
                        </template>
                        <div class="collapse-flex-box">
                            <van-row style="margin-bottom:10px;">
                                <van-col :span="6">
                                    扣分时间
                                </van-col>
                                <van-col :span="18">
                                    2022.03.15 16:21:38
                                </van-col>
                            </van-row>
                            <van-row style="margin-bottom:10px;">
                                <van-col :span="6">
                                    扣分类型
                                </van-col>
                                <van-col :span="18">
                                    卫生评分
                                </van-col>
                            </van-row>
                            <van-row style="margin-bottom:10px;">
                                <van-col :span="6">
                                    楼层名称
                                </van-col>
                                <van-col :span="18">
                                    至礼楼-1F-101寝室
                                </van-col>
                            </van-row>
                            <van-row style="margin-bottom:10px;">
                                <van-col :span="6">
                                    操作人员
                                </van-col>
                                <van-col :span="18">
                                    宿管(李莉颖)
                                </van-col>
                            </van-row>
                            <van-row>
                                <van-col :span="6">
                                    扣分原因
                                </van-col>
                                <van-col :span="18">
                                    室内地板、冲凉房、厕所（有异味）、洗衣台、门窗玻璃、窗台、走廊不清洁、 未倒垃圾等，每一项扣 1分。
                                </van-col>
                            </van-row>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </Card>
            <van-row justify="end" style="margin-top:15px;">
                <Button round type="primary" margin row @click="Agree">同 意</Button>
                <Button round type="border" row @clike="Reject">驳 回</Button>
                <!-- <Button round type="primary" plain row>已同意</Button> -->
                <!-- <Button round type="danger" plain row>驳 回</Button> -->
            </van-row>
        </Card>
        <!-- 同意和驳回弹窗 -->
        <van-action-sheet teleport="#app" v-model:show="isCkeckShow" title="申诉信息">
            <div class="action-content-box">
                <div class="scroll-flex-box" :style="
                    'max-height:' +
                    ($util.getClientHeight() - 260) +
                    'px;min-height: 200px;'
                ">
                    <Card :top="false">
                        <van-row justify="space-between" class="popup-row-common">
                            <van-col :span="18" style="color:#649FFF;">
                                孙茹芸 06
                            </van-col>
                            <van-col :span="6" style="color:#FF5B44;">
                                <van-row justify="end">
                                    -2
                                </van-row>
                            </van-col>
                        </van-row>
                        <van-row justify="space-between" class="popup-row-common">
                            <van-col :span="6" class="color9">
                                操作时间
                            </van-col>
                            <van-col :span="18">
                                <van-row justify="end">
                                    2022.03.15 16:21:38
                                </van-row>
                            </van-col>
                        </van-row>
                        <van-row justify="space-between" class="popup-row-common">
                            <van-col :span="6" class="color9">
                                评分类型
                            </van-col>
                            <van-col :span="18">
                                <van-row justify="end">
                                    卫生评分
                                </van-row>
                            </van-col>
                        </van-row>
                        <van-row justify="space-between" class="popup-row-common">
                            <van-col :span="6" class="color9">
                                扣分原因
                            </van-col>
                            <van-col :span="18">
                            </van-col>
                        </van-row>
                        <van-row justify="space-between" class="popup-row-common">
                            <van-col :span="24">
                                室内地板、冲凉房、厕所（有异味）、洗衣台、门窗玻璃、窗台、走廊不清洁、 未倒垃圾等，扣 1分。
                            </van-col>
                        </van-row>
                        <Card bgColor="#f9f9f9">
                            与学生沟通，学生并无扣分行为，此评分应该是操作失误，请撤回评分，谢谢。
                        </Card>
                    </Card>
                </div>
                <van-row justify="center" style="margin-top:15px;">
                    <Button round type="primary" margin @click="Agree">同 意</Button>
                    <Button round type="border" @clike="Reject">驳 回</Button>
                </van-row>
            </div>
        </van-action-sheet>
    </div>
</template>
<script lang="ts" setup>
import $util from "../util/util";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import personImg from "../assets/images/person.png";
import finishImg from '../assets/images/icon_yishenhe.png'
import nowImg from '../assets/images/icon_daiwoshenhe.png'
import waitImg from '../assets/images/icon_daishenhe.png'
const currentIndex = ref(0)
const tabList = ref([
    {
        name: '待我审核',
        num: 6
    },
    {
        name: '我已审核',
        num: 2
    }
])
const checkType = (Index: number) => {
    currentIndex.value = Index
}
// 审核流程
const activeNames = ref('1')
const isCkeckShow = ref(false);
const Agree = () => {
    isCkeckShow.value = true;
}
const Reject = () => {
    isCkeckShow.value = true;
}
const message=ref('')
onMounted(() => { });
</script>
<style lang="scss" scoped>
.appeal-tabs-box {
    padding: 0px 15px;
    font-size: 16px;

    .common-inactive-box {
        color: #999999;
        text-align: center;

        div:first-of-type {
            font-size: 20px;
            font-family: Arial;
            font-weight: bold;
            color: #333333;
        }

        div:last-of-type {
            font-size: 16px;
            font-family: Medium;
            margin-top: 5px;
        }
    }

    .after-border-box {
        position: relative;
    }

    .after-border-box:after {
        content: '';
        width: 1px;
        height: 34px;
        background: rgba(200, 200, 200, 0.6);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    .common-active-box {
        color: #3D7FFF;

        div:first-of-type {
            color: #3D7FFF;
        }
    }


    .info-flex-box {
        margin-left: 15px;

        div:last-of-type {
            font-size: 14px;
            color: #999999;
            margin-top: 5px;
        }
    }

    .right-flex-box {
        color: #FF5B44;
    }
}

// 折叠面板
.icon-flex-box {
    width: 24px;
    height: 24px;
    background: #649FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collapse-flex-box {
    margin-top: 15px;
}

:deep(.van-collapse-item .van-cell) {
    background: #f9f9f9;
    padding: 0px;
}

:deep(.van-collapse-item__title--expanded:after) {
    display: none;
}

:deep(.van-collapse-item__content) {
    background: #f9f9f9;
    padding: 0px;
}

// 弹窗
.popup-row-common {
    margin-bottom: 10px;
}
</style>